import { useContext } from 'react'
import { Spin } from 'antd'
import { isNullArray } from '@/utils'
import { reportCheckContext } from '../../_context'
import CardDataVarable from '@/components/CardDataVarable'
import styles from '../../index.module.less'

export default () => {
  const { varableTableList, varableLoading } = useContext(reportCheckContext)

  return (
    <>
      <Spin
        spinning={varableLoading}
        style={{ minHeight: '120px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
      >
        {isNullArray(varableTableList) &&
          varableTableList.map((item) => (
            <CardDataVarable key={item.id} text={item.sortName}>
              <div className={styles['cart-list']}>
                {isNullArray(item.variablePlatformVos) &&
                  item.variablePlatformVos.map((val) => (
                    <div key={val.id} className={styles['cart-list-info']}>
                      <div className={styles['cart-list-info-title']}>{val.variableName}</div>
                      <div className={styles['cart-list-info-data']}>{val.variableValue}</div>
                    </div>
                  ))}
              </div>
            </CardDataVarable>
          ))}
      </Spin>
    </>
  )
}
